export interface IFilterImg {
  type: string;
  upY?: number;
  downY?: number;
  coverX?: number;
  coverY?: number;
  coverW?: number;
  coverH?: number;
  coverX1?: number;
  coverY1?: number;
  coverW1?: number;
  coverH1?: number;
}


export const setImage = async (src: string, callback: any, option: any) => {
  const img = new Image();
  img.src = src;
  img.crossOrigin = "Anonymous";
  img.onload = () => {
    const canvas: any = document.createElement("canvas");
    const context: any = canvas.getContext("2d");
    // 获取图像的宽度和高度
    const imgWidth = img.width;
    const imgHeight = img.height;
    canvas.width = imgWidth;
    canvas.height = imgHeight - (option.type === "up" ? option.upY : option.type === "down" ? option.downY : 0);
    context.clearRect(0, 0, imgWidth, imgHeight);
    context.drawImage(
      img, // 要绘制的图像源
      0, // 源图像的起始 x 坐标
      option.type === "up" ? option.upY : 0, // 源图像的起始 y 坐标
      imgWidth, // 源图像的宽度
      option.type === "down" ? imgHeight - option.downY : imgHeight, // 源图像的高度
      0, // 目标画布的起始 x 坐标
      0, // 目标画布的起始 y 坐标
      imgWidth, // 目标画布上图像的宽度
      imgHeight // 目标画布上图像的高度
    );
    // 绘制纯色矩形
    const color = "#000000"; // 黑色遮罩
    const op = 1; // 透明度为 50%
    context.fillStyle = `#00000`; // 设置填充颜色和透明度
    if (option.type === "cover") {
      // 遮住顶部 140 像素
      context.fillRect(option.coverX, option.coverY, option.coverW, option.coverH);
      option.coverX1 ? context.fillRect(option.coverX1, option.coverY1, option.coverW1, option.coverH1) : null;
    }
    const newUrl = canvas.toDataURL("image/jpeg", 1);
    callback(newUrl);
  };
};

export const filterGame = (gameId: number | string, type: number, index?: number | undefined): IFilterImg => {
  console.log(gameId);
  
  //根据官方截图过滤游戏
  switch (gameId) {
    case 81: //王者
      return {
        type: type === 1 ? "down" : "up",
        upY: 140, //上方要截取的高度
        downY: 140, //下方要截取的高度
      };
    case 188: //无畏契约
      return {
        type: "cover",
        coverX: 35,
        coverY: 20,
        coverW: 280,
        coverH: 80,
        coverX1: index === 0 ? 50 : 950,
        coverY1: index === 0 ? 600 : 90,
        coverW1: index === 0 ? 270 : 400,
        coverH1: index === 0 ? 130 : 70,
      };
    case 101: //火影
      return {
        type: "up",
        upY: 80, //上方要截取的高度
        downY: 0, //下方要截取的高度
      };
  }
  return {
    type: ''
  };
};
